import React from "react"
import { Button, Badge, Row, Col, Icon, Popover} from 'antd'
import SlideFrame from 'components/slide-frame'
import BasicInfo from "components/basic-info"
import ReportDistributionService from "containers/report-distribution/report-distribution.service";
import ReportDistributionMaintain from "containers/report-distribution/report-distribution-maintain"
import ResizeTable from 'components/resize-table'
import {messages} from "share/common";
import menuRoute from "routes/menuRoute";

class ReportDistributionDetails extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loading: false,
      data: [],
      pagination: {
        total: 0,
        current: 1,
      },
      page: 0,
      pageSize: 10,
      reportDetailList:[
        //报表名称
        { type: 'text', id: 'name', label: messages('report-distribution.key1'/*报表名称*/)},
        //报表ID
        { type: 'text', id: 'code', label: messages('report-distribution.key2'/*报表ID*/)},
        //创建日期
        { type: 'date', id: 'createdDate', label: messages('report-distribution.key3'/*创建日期*/)},
        //报表描述
        { type: 'text', id: 'comments', label: messages('report-distribution.key4'/*报表描述*/)},
        //报表类型
        { type: 'select', id: 'reportAttr', label: messages('report-distribution.key5'/*报表类型*/),
          options:[
            {
              value: "public",
              label: messages('report-distribution.key6'/*公开*/)
            },
            {
              value: "private",
              label: messages('report-distribution.key7'/*私有*/)
            }]
        },
        //报表图片
        { type: 'img', id: 'fileURL', src:'fileURL' ,label: ""}
      ],
      reportHeadDTO:{},
      columns: [
        {title: messages("common.sequence"), dataIndex: 'index', width: '6%'},    //序号
        {title: messages('report-distribution.key1'/*报表名称*/), dataIndex: "copyName", render: value => {
            return <Popover placement="topLeft" content={value}>{value}</Popover>
          }},   //报表副本名称
        {title: messages('report-distribution.key8'/*分配日期*/), dataIndex: "createdDate", render: createdDate => createdDate.substr(0,10)},    //分配日期
        {title: messages('report-distribution.key9'/*说明*/), dataIndex: "copyComments", render: value => {
            return <Popover placement="topLeft" content={value}>{value}</Popover>
          }},    //说明
        {title: messages("common.column.status"), dataIndex: "status",width: '12%', render: status => ( //状态
            <Badge  status = {status === "open" ? 'success' : 'error'}
                    text = {status === "open" ? messages('report-distribution.key10'/*启用*/) : messages('report-distribution.key11'/*未启用*/)}/>
          )},
        {title: messages("common.operation"), key: 'operation', width: '12%', render: (text, record) => (  //编辑
          <span>
            <a onClick={(e) => this.handleEdit(e, record)}>{messages ("common.edit")}</a>
          </span>)
        }   //操作
      ],
      showSlideFrame: false,
      showSlideFrameContent :{
        isNew: true,
        reportDetail:[],
        newCopyReportDetail:[],
        distributionPeopleList:[],
      },
      reportLineOID:""
    };
    this.reportDistribution = menuRoute.getRouteItem('report-distribution', 'key');
  }

  componentWillMount() {
    this.getList();
  }

  getList = () => {
    this.setState({loading: true});
    let { page, pageSize } = this.state;
    if(this.props.params.status === "ASSIGNED"){
      ReportDistributionService.getReportDetailList(page, pageSize,this.props.params).then((response) => {
        response.data.map((item,index) => {
          item.index = index + page * pageSize + 1;
          item.key = item.reportLineOID;
        });
        response.data[0].reportHeadDTO.fileURL = (response.data[0].reportHeadDTO.attachmentDTO) ? response.data[0].reportHeadDTO.attachmentDTO.fileURL : "";
        this.setState({
          data: response.data,
          loading: false,
          reportHeadDTO: response.data[0].reportHeadDTO,
          pagination: {
            total: Number(response.headers['x-total-count']) ? Number(response.headers['x-total-count']) : 0,
            onChange: this.onChangePager,
            current: this.state.page + 1
          }
        })
      });
    }else{
      ReportDistributionService.getReportDetail(this.props.params.reportHeadOID).then((response) => {
        response.data.fileURL = response.data.attachmentDTO ? response.data.attachmentDTO.fileURL : "";
        this.setState({
          loading: false,
          reportHeadDTO: response.data,
          pagination: {
            total: Number(response.headers['x-total-count']) ? Number(response.headers['x-total-count']) : 0,
            onChange: this.onChangePager,
            current: this.state.page + 1
          }
        })
      });
    }
  }

  createNewDistribution = () => {
    this.setState({loading: true});
    let data = {
      "reportHeadOID": this.props.params.reportHeadOID
    }

    ReportDistributionService.getReportDetail(this.props.params.reportHeadOID).then((response) => {
      let newCopyReportDetail = response.data;
      ReportDistributionService.createCopyReport(data).then((response) => {
        this.setState({
          showSlideFrame: true,
          showSlideFrameContent :{
            isNew: true,
            pagination: {
              total: 0,
              current: 1
            },
            reportLineOID: response.data.reportLineOID,
            newCopyReportDetail: newCopyReportDetail
          },
          loading: false
        })
      });
    });
  };

  handleEdit = (e,record) => {
    this.setState({loading: true,showSlideFrame: true});
    ReportDistributionService.getCopyReportDetail(record.reportLineOID).then((response) => {
      this.setState({
        loading: false,
        showSlideFrameContent :{
          isNew: false,
          pagination: {
            total: 0,
            current: 1
          },
          reportDetail: response.data,
          reportLineOID: record.reportLineOID
        }
      })
    });
  };

  onChangePager = (page) => {
    if(page - 1 !== this.state.page)
      this.setState({
        page: page - 1,
        loading: true
      }, ()=>{
        this.getList();
      })
  };


  closeSlide = () =>{
    this.refs.form.form.onCancel();
    //this.form.props.form.resetFields();
  };

  handleCloseNewSlide = (params) => {
    this.setState({
      showSlideFrame: false,
      isNew: false
    }, () => {
      if (params) {
        this.getList();
      }
    })
  };

  render() {
    const { data,pagination,columns,loading,reportDetailList,reportHeadDTO,showSlideFrame,showSlideFrameContent } = this.state;
    return(
      <div>
        <div className="basic-info-extend-wrap">
          <BasicInfo
            infoList={reportDetailList}
            infoData={reportHeadDTO}
            isHideEditBtn={true}/>
        </div>

        <div className="table-header">
          <div
            className="table-header-title">{messages("common.total", {total: pagination.total ? pagination.total : '0'})}</div>
          {/* 共搜索到total条数据 */}
          <div className="table-header-buttons">
            <Row>
              <Col span="2">
                <Button type="primary" onClick={this.createNewDistribution}>
                  {messages('report-distribution.key12'/*新建分配*/)}{/* 创建新分配 */}
                </Button>
              </Col>
              <Col span='15'>
              </Col>
            </Row>
          </div>
        </div>
        <ResizeTable
          columns={columns}
          dataSource={data}
          pagination={pagination}
          loading={loading}
          bordered
        />
        <div style={{fontSize: 14,margin: '20px 0',}}>
          <a onClick={() => {this.context.router.push(this.reportDistribution.url)}}><Icon type="rollback" />{messages("common.back")/*返回*/}</a>
        </div>
        <SlideFrame title={ showSlideFrameContent.isNew ? messages('report-distribution.key12'/*新建分配*/) : messages('report-distribution.key13'/*编辑分配*/)}
                    show={showSlideFrame}
                    content={ReportDistributionMaintain}
                    onClose={this.closeSlide}
                    afterClose={this.handleCloseNewSlide}
                    params={showSlideFrameContent}
                    hasFooter={true}
                    ref="form"
        />
      </div>
    );
  }
}


ReportDistributionDetails.contextTypes = {
  router: React.PropTypes.object
};

export default  ReportDistributionDetails;
